const app = getApp()

Page({
  data: {
    loading: true,
    updateTime: 0,
    updateTimer: null,
    
    // 仪表板数据
    dashboardData: {},
    
    // 统计数据
    orderStats: [],
    productStats: [],
    processStats: [],
    employeeStats: [],
    
    // 当前活动标签页
    activeTab: 'orders',
    
    // 图表实例
    processChart: null,
    employeeChart: null
  },

  onLoad(options) {
    this.initPage()
  },

  onShow() {
    this.loadDashboardData()
    this.startUpdateTimer()
  },

  onHide() {
    this.stopUpdateTimer()
  },

  onUnload() {
    this.stopUpdateTimer()
  },

  // 初始化页面
  initPage() {
    this.loadDashboardData()
    this.startUpdateTimer()
  },

  // 开始更新计时器
  startUpdateTimer() {
    this.stopUpdateTimer()
    this.setData({ updateTime: 0 })
    
    this.data.updateTimer = setInterval(() => {
      this.setData({
        updateTime: this.data.updateTime + 1
      })
    }, 1000)
  },

  // 停止更新计时器
  stopUpdateTimer() {
    if (this.data.updateTimer) {
      clearInterval(this.data.updateTimer)
      this.data.updateTimer = null
    }
  },

  // 加载仪表板数据
  loadDashboardData() {
    this.setData({ loading: true })
    
    app.request({
      url: '/getProductionPlanProgress',
      method: 'GET',
      data: {}
    }).then(res => {
      this.setData({ loading: false })
      
      if (res.code === 1) {
        const data = res.data
        
        // 更新仪表板数据
        this.setData({
          dashboardData: data.overallStats || {}
        })
        
        // 更新统计数据
        this.updateStatsData(data)
        
        // 更新图表
        this.updateCharts(data)
        
        console.log('大屏数据加载成功:', data)
      } else {
        wx.showToast({
          title: res.msg || '加载失败',
          icon: 'none'
        })
      }
    }).catch(err => {
      this.setData({ loading: false })
      console.error('加载大屏数据失败:', err)
      wx.showToast({
        title: '加载失败',
        icon: 'none'
      })
    })
  },

  // 更新统计数据
  updateStatsData(data) {
    const plans = data.plans || []
    
    // 按订单统计
    const orderMap = {}
    plans.forEach(plan => {
      const orderId = plan.order_id
      if (!orderMap[orderId]) {
        orderMap[orderId] = {
          order_id: orderId,
          order_name: plan.order_name || '-',
          order_no: plan.order_no || '-',
          plan_count: 0,
          total_quantity: 0,
          completed_quantity: 0,
          completion_rate: 0
        }
      }
      orderMap[orderId].plan_count++
      orderMap[orderId].total_quantity += plan.total_quantity || 0
      orderMap[orderId].completed_quantity += plan.actual_quantity || 0
    })
    
    // 计算完成率
    Object.values(orderMap).forEach(order => {
      if (order.total_quantity > 0) {
        order.completion_rate = Math.round((order.completed_quantity / order.total_quantity) * 100)
      }
    })
    
    // 按产品统计
    const productMap = {}
    plans.forEach(plan => {
      const productId = plan.product_id
      if (!productMap[productId]) {
        productMap[productId] = {
          product_id: productId,
          product_name: plan.product_name || '-',
          plan_count: 0,
          total_quantity: 0,
          completed_quantity: 0,
          completion_rate: 0
        }
      }
      productMap[productId].plan_count++
      productMap[productId].total_quantity += plan.total_quantity || 0
      productMap[productId].completed_quantity += plan.actual_quantity || 0
    })
    
    // 计算完成率
    Object.values(productMap).forEach(product => {
      if (product.total_quantity > 0) {
        product.completion_rate = Math.round((product.completed_quantity / product.total_quantity) * 100)
      }
    })
    
    this.setData({
      orderStats: Object.values(orderMap),
      productStats: Object.values(productMap),
      processStats: data.processStats || [],
      employeeStats: data.employeeStats || []
    })
  },

  // 更新图表
  updateCharts(data) {
    // 更新工序完成率分布图
    this.updateProcessChart(data.processStats || [])
    
    // 更新员工完成率排行图
    this.updateEmployeeChart(data.employeeStats || [])
  },

  // 更新工序完成率分布图
  updateProcessChart(processStats) {
    const ctx = wx.createCanvasContext('processChart', this)
    const centerX = 100
    const centerY = 120  // 向下移动，为半圆留空间
    const radius = 70
    const innerRadius = 40
    
    // 过滤掉完成率为0的工序，只取前4个
    const validProcesses = processStats.filter(process => process.completion_rate > 0).slice(0, 4)
    
    if (validProcesses.length === 0) {
      // 绘制空状态
      ctx.setFillStyle('#666666')
      ctx.setFontSize(12)
      ctx.setTextAlign('center')
      ctx.fillText('暂无数据', centerX, centerY)
      ctx.draw()
      return
    }
    
    // 计算总完成率
    const totalRate = validProcesses.reduce((sum, process) => sum + process.completion_rate, 0)
    
    let currentAngle = -Math.PI / 2 // 从顶部开始
    
    // 颜色数组 - 根据图片调整
    const colors = ['#2196F3', '#FF9800', '#F44336', '#4CAF50']
    
    validProcesses.forEach((process, index) => {
      const rate = process.completion_rate
      const angle = (rate / totalRate) * Math.PI // 只画半圆
      
      // 绘制扇形
      ctx.beginPath()
      ctx.moveTo(centerX, centerY)
      ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + angle, false)
      ctx.closePath()
      ctx.setFillStyle(colors[index % colors.length])
      ctx.fill()
      
      // 绘制内圆（创建环形效果）
      ctx.beginPath()
      ctx.moveTo(centerX, centerY)
      ctx.arc(centerX, centerY, innerRadius, currentAngle, currentAngle + angle, false)
      ctx.closePath()
      ctx.setFillStyle('#0a1b2e')
      ctx.fill()
      
      currentAngle += angle
    })
    
    // 绘制中心文字 - 根据图片显示
    ctx.setFillStyle('#ffffff')
    ctx.setFontSize(12)
    ctx.setTextAlign('center')
    ctx.fillText('工序完成率', centerX, centerY - 8)
    ctx.setFontSize(10)
    ctx.fillText('分布图', centerX, centerY + 5)
    
    ctx.draw()
  },

  // 更新员工完成率排行图
  updateEmployeeChart(employeeStats) {
    const ctx = wx.createCanvasContext('employeeChart', this)
    const topEmployees = employeeStats.slice(0, 3) // 只显示前3名，根据图片
    
    if (topEmployees.length === 0) {
      // 绘制空状态
      ctx.setFillStyle('#666666')
      ctx.setFontSize(12)
      ctx.setTextAlign('center')
      ctx.fillText('暂无数据', 100, 100)
      ctx.draw()
      return
    }
    
    const barWidth = 35
    const barSpacing = 50
    const maxHeight = 90
    const startX = 30
    const startY = 130
    
    // 找到最大完成率
    const maxRate = Math.max(...topEmployees.map(emp => emp.completion_rate))
    
    topEmployees.forEach((employee, index) => {
      const x = startX + index * barSpacing
      const barHeight = (employee.completion_rate / maxRate) * maxHeight
      const y = startY - barHeight
      
      // 绘制柱子 - 根据图片使用绿色
      ctx.setFillStyle('#4CAF50')
      ctx.fillRect(x, y, barWidth, barHeight)
      
      // 绘制数值 - 根据图片显示百分比
      ctx.setFillStyle('#ffffff')
      ctx.setFontSize(12)
      ctx.setTextAlign('center')
      ctx.fillText(employee.completion_rate.toFixed(1) + '%', x + barWidth / 2, y - 8)
      
      // 绘制员工姓名 - 简化显示
      ctx.setFillStyle('#cccccc')
      ctx.setFontSize(10)
      const displayName = employee.user_name.length > 3 ? employee.user_name.substring(0, 3) : employee.user_name
      ctx.fillText(displayName, x + barWidth / 2, startY + 15)
    })
    
    ctx.draw()
  },

  // 切换标签页
  switchTab(e) {
    const tab = e.currentTarget.dataset.tab
    this.setData({
      activeTab: tab
    })
  },

  // 手动刷新
  manualRefresh() {
    this.loadDashboardData()
    this.setData({ updateTime: 0 })
  },

  // 关闭大屏
  closeDashboard() {
    wx.showModal({
      title: '确认关闭',
      content: '确定要关闭生产大屏吗？',
      success: (res) => {
        if (res.confirm) {
          // 根据用户类型返回不同页面
          const userInfo = app.globalData.userInfo
          if (userInfo && userInfo.isAdmin) {
            // 管理员返回管理员首页
            wx.switchTab({
              url: '/pages/index/index'
            })
          } else {
            // 普通用户返回用户首页
            wx.switchTab({
              url: '/pages/user-index/user-index'
            })
          }
        }
      }
    })
  }
})
